<template>
  <div class="page2 bgm">
    <div class="head bgm">
      <div class="text">
        兔场可视化管理平台
      </div>
    </div>
    <div class="logo bgm">
      <img src="@/assets/logo.png" style="height: 80px" alt="">
    </div>
    <div class="date">
      {{ currentDate }}
    </div>

    <div class="page2-6">
      <div class="left">
        <div class="left2 bg3">
          <div class="left2-title title-bg">
            <span>基础信息</span>
          </div>
          <div class="left2-item-list f-r j-b f-w">
            <div class="left2-item bg2 f-r a-c" v-for="(item,index) in left2List" :key="index">
              <div class="left2-item-label">
                <div class="left2-item-name">
                  {{ item.name }}
                </div>
                <div class="left2-item-value f-r a-c">
                  <div class="left2-item-count">
                    {{ item.value }}
                  </div>
                  <div class="left2-item-unit">
                    {{ item.unit }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="left2 bg3" style="margin: 12px 0">
          <div class="left2-title title-bg">
            <span>近48h热环境与空气质量</span>
          </div>
          <iframe color="#ADE3FF" scrolling="no" src="https://widget.tianqiapi.com/?style=tg&skin=durian&color=ADE3FF&&paddingtop=20&province=福建&city=南平" frameborder="0" paddingtop="100" width="620" height="68" allowtransparency="true"></iframe>
          <VChart style="width: 100%;height: 200px" :option="option2" :autoresize="true" ></VChart>
        </div>
        <div class="left2 bg3" style="min-height: 320px">
          <div class="left2-title title-bg">
            <span>近7天舍内热环境</span>
            <div class="more" @click="openDialog">
              查看更多
              <i class="el-icon el-icon-arrow-right"></i>
            </div>
          </div>
          <div class="chart-list">
            <div class="chart-item" v-for="(item,index) in chartList" :key="index">
              <VChart
                  style="width: 100%;height: 130px"
                  :option="getLineOption(item, 10)"
                  :autoresize="true">
              </VChart>
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="center-controll">
          <el-select v-model="roomId" @change="changeRoom">
            <el-option v-for="item in roomList" :key="item.room" :value="item.room" :label="item.room_text"></el-option>
          </el-select>
          <el-select v-model="deviceId" placeholder="请选择设备">
            <el-option v-for="item in deviceList" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </div>
        <!--          <div style="width: 100%;display: flex;align-items: center;justify-content: space-between">-->
        <!--            <div class="online-box">-->
        <!--              <div class="online-name" style="margin-right: 20px;font-weight: bold">设备状态：</div>-->
        <!--              <div class="online">-->
        <!--                100台-->
        <!--              </div>-->
        <!--              <div class="online offline">-->
        <!--                50台-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            <div class="back-btn">-->
        <!--              <el-select v-model="deviceId" clearable placeholder="请选择设备">-->
        <!--                <el-option v-for="item in deviceList" :key="item.id" :value="item.id" :label="item.name"></el-option>-->
        <!--              </el-select>-->
        <!--            </div>-->
        <!--          </div>-->
        <div class="video-wrapper">
          <template>
            <div class="video-box" v-if="deviceId">
              <div class="video-item" style="width: 100%">
                <video :src="currentDevice.url" controls autoplay></video>
              </div>
            </div>
            <div class="video-box">
              <div class="video-item" v-for="item in otherDeviceList" :key="item.id">
                <video :src="item.url" controls autoplay></video>
              </div>
            </div>
          </template>
        </div>
        <el-row :gutter="12" style="width: 100%">
          <el-col :span="12">
            <div class="center2 bg3">
              <div class="right1-title title-bg">
                <span>近48h体温数据</span>
                <div class="more" @click="openDialog1">
                  查看更多
                  <i class="el-icon el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="chart-list" style="flex-grow: 1;padding: 0 12px">
                <VChart
                    v-for="item in chartList1" :key="item.code"
                    style="width: 100%;height: 100%"
                    :option="getLineOption(item, 12, 40, 20, 30)"
                    :autoresize="true">
                </VChart>
              </div>

            </div>
          </el-col>
          <el-col :span="12">
            <div class="center2 bg3">
              <div class="right2-title title-bg">
                <span>近48h舍内气温阈值</span>
                <div class="more" @click="openDialog4">
                  查看更多
                  <i class="el-icon el-icon-arrow-right"></i>
                </div>
              </div>
              <div style="flex-grow: 1;padding: 0 12px">
                <VChart
                    style="width: 100%;height: 100%"
                    :option="temOption"
                    :autoresize="true">
                </VChart>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="right">
        <div class="right1 bg3">
          <div class="right1-title title-bg">
            近7天生产数据
            <div class="more" @click="openDialog2">
              查看更多
              <i class="el-icon el-icon-arrow-right"></i>
            </div>
          </div>
          <div class="chart-list">
            <el-row :gutter="12">
              <el-col :span="12" v-for="item in chartList2Sort" :key="item.code">
                <VChart
                    style="width: 100%;height: 110px"
                    :option="getLineOption(item, 10,item.nameGap)"
                    :autoresize="true">
                </VChart>
              </el-col>
            </el-row>
          </div>
          <TextScroll :dataList="dataList"/>
        </div>
        <div class="right4 bg3">
          <div class="right2-title title-bg">
            近48h舍内气温综合评价
            <div class="more" @click="openDialog3">
              查看更多
              <i class="el-icon el-icon-arrow-right"></i>
            </div>
          </div>
          <div class="f-r a-c">
            <div style="flex-grow: 1;padding-left: 0px">
              <el-row :gutter="12">
                <el-col :span="24" v-for="(item,index) in chartList3" :key="index" style="margin-bottom: 8px">
                  <div style="display: flex;align-items: center">
                    <div class="color-legend">
                      <div class="legend-item">
                        <div class="legend-color" style="background: linear-gradient(to bottom, #0000ff 0%, #ff0000 100%);"></div>
                        <div class="legend-labels">
                          <span>1.0</span>
                          <span>0.8</span>
                          <span>0.6</span>
                          <span>0.4</span>
                          <span>0.2</span>
                          <span>0.0</span>
                        </div>
                        <div class="legend-labels" style="justify-content: center;margin-left: 5px">
                            舒<br>适<br>偏<br>好
                        </div>
                      </div>
                    </div>
                    <VChart
                        style="width: 100%;height: 100px"
                        :option="getLineOptionAndPoint(item, 10, 30)"
                        :autoresize="true">
                    </VChart>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
          width="70%"
          top="5vh"
          title="舍内热环境"
          :visible.sync="dialogShow"
          append-to-body
          modal-append-to-body>
        <div>
          <el-form>
            <el-form-item label="时间范围：">
              <el-date-picker
                  size="mini"
                  type="daterange"
                  v-model="datePicker"
                  @change="changeDialogDate"></el-date-picker>
            </el-form-item>
          </el-form>
          <div class="chart-list">
            <el-row :gutter="12">
              <el-col :span="12" v-for="(item,index) in dialogChartList" :key="index">
                <div style="background-color: rgba(0,0,0,0.3);padding: 12px;margin-bottom: 12px">
                  <VChart
                      style="width: 100%;height: 240px;"
                      :option="getLineOption(item, 14)"
                      :autoresize="true">
                  </VChart>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-dialog>
      <el-dialog
          width="50%"
          top="5vh"
          title="近48h体温数据"
          :visible.sync="dialogShow1"
          append-to-body
          modal-append-to-body>
        <div>
          <el-form>
            <el-form-item label="时间范围：">
              <el-date-picker size="small" style="width: 460px" @change="changeDialog1Date" type="datetimerange" v-model="datePicker1"></el-date-picker>
            </el-form-item>
          </el-form>
          <el-row :gutter="12">
            <el-col :span="24" v-for="(item,index) in dialogChartList1" :key="index">
              <div style="background-color: rgba(0,0,0,0.3);padding: 12px;margin-bottom: 12px">
                <VChart
                    style="width: 100%;height: 300px;"
                    :option="getLineOption(item, 12, 40)"
                    :autoresize="true">
                </VChart>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
      <el-dialog
          width="50%"
          top="5vh"
          title="近48h舍内气温阈值"
          :visible.sync="dialogShow4"
          append-to-body
          modal-append-to-body>
        <div>
          <el-form>
            <el-form-item label="时间范围：">
              <el-date-picker size="small" style="width: 460px" @change="changeDialog4Date" type="datetimerange" v-model="datePicker4"></el-date-picker>
            </el-form-item>
          </el-form>
          <el-row :gutter="12">
            <el-col :span="24">
              <div style="background-color: rgba(0,0,0,0.3);padding: 12px;margin-bottom: 12px">
                <VChart
                    style="width: 100%;height: 300px"
                    :option="dialogTemOption"
                    :autoresize="true">
                </VChart>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
      <el-dialog
          width="70%"
          top="5vh"
          title="生产数据"
          :visible.sync="dialogShow2"
          append-to-body
          modal-append-to-body>
        <div>
          <el-form>
            <el-form-item label="时间范围：">
              <el-date-picker type="daterange" v-model="datePicker2" @change="changeDialog2Date"></el-date-picker>
            </el-form-item>
          </el-form>
          <div class="chart-list">
            <el-row :gutter="12">
              <el-col :span="8" v-for="(item,index) in dialogChartList2Sort" :key="index">
                <div style="background-color: rgba(0,0,0,0.3);padding: 12px;margin-bottom: 12px">
                  <VChart
                      style="width: 100%;height: 200px;"
                      :option="getLineOption(item, 12)"
                      :autoresize="true">
                  </VChart>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="table-list">
            <div class="thead">
              <div class="tr">
                <div class="td td1" style="width: 200px">日期</div>
                <div class="td td2">非健康肉兔笼位</div>
                <div class="td td3">原因</div>
              </div>
            </div>
            <div style="height: 250px;overflow:auto">
              <div v-for="item in dataList" :key="item.id" style="display: flex" class="tr" >
                <div class="td td1" style="width: 200px">
                  {{ item.date }}
                </div>
                <div class="td td2">
                  {{ item.room_text }}
                </div>
                <div class="td td3">
                  {{ item.monitor_value }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog
          width="70%"
          top="5vh"
          title="舍内气温综合评价"
          :visible.sync="dialogShow3"
          append-to-body
          modal-append-to-body>
        <div>
          <el-form>
            <el-form-item label="时间范围：">
              <el-date-picker size="small" style="width: 460px" @change="changeDialog3Date" type="datetimerange" v-model="datePicker3"></el-date-picker>
            </el-form-item>
          </el-form>
          <div class="chart-list">
            <el-row :gutter="12">
              <el-col :span="12" v-for="(item,index) in dialogChartList3" :key="index">
                <div style="display: flex;align-items: center;background-color: rgba(0,0,0,0.3);padding: 12px;margin-bottom: 12px">
                  <div class="color-legend">
                    <div class="legend-item">
                      <div class="legend-color" style="background: linear-gradient(to bottom, #0000ff 0%, #ff0000 100%);"></div>
                      <div class="legend-labels">
                        <span>1.0</span>
                        <span>0.8</span>
                        <span>0.6</span>
                        <span>0.4</span>
                        <span>0.2</span>
                        <span>0.0</span>
                      </div>
                      <div class="legend-labels" style="justify-content: center;margin-left: 5px">
                        舒<br>适<br>偏<br>好
                      </div>
                    </div>
                  </div>
                  <div style="flex-grow: 1">
                    <VChart
                        style="width: 100%;height: 240px;"
                        :option="getLineOptionAndPoint(item, 12)"
                        :autoresize="true">
                    </VChart>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import TextScroll from "@/components/TextScroll.vue";
import axios from "axios";
const fontColor = "#abd0e4";
const fontSize = 12
const fontWeight = 500

function getWeek(option) {
  switch (option) {
    case 0:
      return "星期日";
    case 1:
      return "星期一";
    case 2:
      return "星期二";
    case 3:
      return "星期三";
    case 4:
      return "星期四";
    case 5:
      return "星期五";
    case 6:
      return "星期六";
  }
  var week = "日一二三四五六".charAt(option);
  return "星期" + week;
}
function showTime() {
  var dateTime = new Date();
  var year = dateTime.getFullYear();
  var month = dateTime.getMonth() + 1;
  month = month < 10 ? "0" + month : month;
  var date = dateTime.getDate();
  date = date < 10 ? "0" + date : date;
  var hour = dateTime.getHours();
  hour = hour < 10 ? "0" + hour : hour;
  var minute = dateTime.getMinutes();
  minute = minute < 10 ? "0" + minute : minute;
  var second = dateTime.getSeconds();
  second = second < 10 ? "0" + second : second;
  var day = dateTime.getDay();
  var week = getWeek(day);
  dateTime = year + "." + month + "." + date + "" + " " + week + " " + hour + ":" + minute + ":" + second
  return dateTime
}

export default {
  name: "page2-6",
  components: {TextScroll},
  data() {
    return {
      currentDate: '',
      // 农场信息
      farm_type: '',
      farmId: '',
      farm_name: '',
      // 当前畜牧舍信息
      roomList: [],
      roomDetail: {
        // 舍类型-品种-时期
      },
      roomId: '',
      deviceId: '',
      deviceList: [],
      option2: {},
      chartList: [
      ],
      dialogChartList: [],
      dataList:[

      ],
      chartList1: [
      ],
      dialogChartList1: [],
      chartList2: [
      ],
      dialogChartList2: [],
      dialogDataList: [],
      chartList3: [
      ],
      datePicker: [
        '2023-08-10 00:00:00',
        '2023-08-12 00:00:00'
      ],
      datePicker1:[
        '2023-08-10 00:00:00',
        '2023-08-12 00:00:00'
      ],
      datePicker2:[
        '2023-08-01 00:00:00',
        '2023-08-08 00:00:00'
      ],
      datePicker3: [
        '2023-08-10 00:00:00',
        '2023-08-12 00:00:00'
      ],
      datePicker4: [
        '2023-08-10 00:00:00',
        '2023-08-12 00:00:00'
      ],
      dialogChartList3: [],
      temOption: {},
      dialogTemOption: {},
      dialogShow: false,
      dialogShow1: false,
      dialogShow2: false,
      dialogShow3: false,
      dialogShow4: false
    }
  },
  computed: {
    left2List() {
      return [
        {
          name: '舍类型',
          value: this.roomDetail.location,
          unit: ''
        },
        {
          name: '品种',
          value: this.roomDetail.breed,
          unit: ''
        },
        {
          name: '时期',
          value: this.roomDetail.period,
          unit: ''
        },
      ]
    },
    chartList2Sort() {
      return [...this.chartList2].sort((a,b) => b.code - a.code)
    },
    dialogChartList2Sort() {
      return [...this.dialogChartList2].sort((a,b) => b.code - a.code)
    },
    currentDevice() {
      return this.deviceList.find(item => item.id === this.deviceId) || {}
    },
    otherDeviceList() {
      return this.deviceList.filter(item => item.id !== this.deviceId)
    }
  },
  created() {
    this.time = setInterval(() => {
      this.currentDate = showTime()
    },100)
  },
  beforeDestroy() {
    clearInterval(this.time)
    this.time = null
  },
  mounted() {
    this.farm_type = this.$route.query.farm_type || this.farm_type
    this.farmId = this.$route.query.farm_id || this.farmId
    this.getFarmInfo()
    this.getRoomList()
  },
  methods: {
    getFarmInfo() {
      axios.get('/api/farm/' + this.farmId).then(res => {
        this.farm_name = res.data.data.farm_name
      })
    },
    async asyncRoom() {
      return await axios.get('/api/rabbit/roomSync?farmId=' + this.farmId)
    },
    getRoomList() {
      axios.get('/api/rabbit/roomList?farmId=' + this.farmId).then(res => {
        this.roomList = res.data.data
        if(this.roomList.length) {
          this.changeRoom(this.roomList[0].room)
        }
      })
    },
    changeRoom(room) {
      this.roomId = room
      this.roomDetail = this.roomList.find(item => item.room === room) || {}
      this.initData()
    },
    initData() {
      this.getWeather()
      /**
       * 室外数据
       * @type {string}
       */
      // 默认近48小时前，当前的前两天
      // startTime = dayjs().subtract(2, 'day').format('YYYY-MM-DD 00:00:00')
      // endTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD 23:59:59')
      this.getRoomOutData(this.datePicker[0], this.datePicker[1], 'chart')
      this.getTemp(this.datePicker1[0], this.datePicker1[1],'chart')
      /**
       * 生理数据
       */
      this.getGrowthData(this.datePicker2[0], this.datePicker2[1],'chart')
      /**
       * 气温综合评价
       */
      this.getTemEvaluate( this.datePicker3[0], this.datePicker3[1],'chart',)

      /**
       * 气温阈值
       */
      this.getTemThreshold(this.datePicker4[0], this.datePicker4[1], 'chart')
      /**
       * 获取设备
       */
      this.getDeviceList(this.datePicker[0], this.datePicker[1])
    },
    getWeather() {
      axios.get('http://v1.yiketianqi.com/free/week?vue=1&unescape=1&appid=47276687&appsecret=EhPb1e2m&province=福建&city=南平').then(res => {
        const option2Data = [
          {
            name: "温度",
            data:  res.data.data.map(item => item.tem_day),
            color: "#00eff2",
          },
        ];
        this.option2 = {
          grid: {
            left: 0,
            right: 20,
            top: 30,
            bottom:20,
            containLabel: true,
          },
          tooltip: {
            show: true,
            trigger: "axis",
            // 文字拼接温度单位
            formatter: function (params) {
              let res = params[0].name + "<br/>";
              for (let i = 0; i < params.length; i++) {
                res += params[i].marker + params[i].seriesName + "：" + params[i].value + "℃<br/>";
              }
              return res;
            },
          },
          legend: {
            show: false,
            bottom: 0,
            data: option2Data.map((el) => {
              return {
                name: el.name,
                textStyle: {
                  color: el.color,
                },
              };
            }),
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: true,
              axisLabel: {
                color: fontColor,
                fontSize: fontSize,
                fontWeight: fontWeight,
                margin: 10,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#0093A7",
                },
              },
              axisTick: {
                show: true,
                lineStyle: {
                  color: "#00FFFF",
                },
              },
              splitLine: {
                show: false,
              },
              data: res.data.data.map(item => item.date),
            },
          ],
          yAxis: [
            {
              type: "value",
              name: '℃',
              axisLabel: {

                color: fontColor,
                fontSize: fontSize,
                fontWeight: fontWeight
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#0093A7",
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(0, 147, 167, .18)",
                },
              },
            },
          ],
          series: option2Data.map((el) => {
            return {
              name: el.name,
              type: "line",
              itemStyle: {
                normal: {
                  color: el.color,
                },
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(0, 255, 255, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 255, 255, 0)",
                    },
                  ]),
                  shadowColor: "rgba(0, 0, 0, 0.1)",
                  shadowBlur: 10,
                },
              },
              label: {
                show: true,
                textStyle: {
                  color: '#00eff2'
                },
                position: 'top',
                // 加摄氏度
                formatter: function (params) {
                  return params.value + '℃'
                }
              },
              data: el.data,
            };
          }),
        }
      })
    },
    getDeviceList(startTime,endTime) {
      axios.post(`/api/rabbit/deviceInfo`, {
        farmId: this.farmId,
        roomId: this.roomId,
        startTime,
        endTime,
      }).then(res => {
        this.deviceList = res.data.data
        this.deviceId = this.deviceList[0] ? this.deviceList[0].id : ''
      })
    },
    changeDialog4Date() {
      this.getTemThreshold(this.datePicker4[0], this.datePicker4[1], 'dialog')
    },
    getTemThreshold(startTime,endTime, type = 'chart') {
      axios.post(`/api/rabbit/temThreshold`, {
        farmId: this.farmId,
        roomId: this.roomId,
        startTime,
        endTime,
      }).then(res => {
        this.setTemOption(res.data.data.list, 28, 24, type)
      })
    },
    changeDialog3Date() {
      this.getTemEvaluate( this.datePicker3[0], this.datePicker3[1],'dialog')
    },
    getTemEvaluate( startTime, endTime,type) {
      axios.post(`/api/rabbit/temEvaluate`, {
        farmId: this.farmId,
        roomId: this.roomId,
        startTime,
        endTime,
      }).then(res => {
        if (type === 'chart') {
          this.chartList3 = res.data.data.map(item => {
            return {
              ...item,
              data: item.data.map(sub => {
                return {
                  ...sub,
                  // date 2023-08-01替换为 2023\n08-01
                  name: sub.name.replace(/-/, '\n')
                }
              })
            }
          })
        } else {
          this.dialogChartList3 = res.data.data.map(item => {
            return {
              ...item,
              data: item.data.map(sub => {
                return {
                  ...sub,
                  // date 2023-08-01替换为 2023\n08-01
                  name: sub.name.replace(/-/, '\n')
                }
              })
            }
          })
        }
      })
    },
    /**
     * 室外数据
     * @param startTime
     * @param endTime
     * @param type
     */
    getRoomOutData(startTime, endTime, type = 'chart') {
      let codeList = [
        {
          code: 101,
          name: '气温',
          unit: '',
          data: [

          ],
          itemStyle: {
            color: '#00F0FF'
          }
        },
        {
          code: 102,
          name: '湿度',
          unit: '',
          data: [
          ],
          itemStyle: {
            color: '#FE860E'
          }
        },
        {
          code: 104,
          name: '风速',
          unit: '',
          data: [
          ],
          itemStyle: {
            color: '#1ECAE7'
          },
        },
        {
          code: 103,
          name: '黑球温度',
          unit: '',
          data: [

          ],
          itemStyle: {
            color: '#FF5580'
          }
        },
        {
          code: 109,
          name: '光照',
          unit: '',
          data: [

          ],
          itemStyle: {
            color: '#3C7FF4'
          }
        },
        {
          code: 105,
          name: '二氧化碳',
          unit: '',
          data: [

          ],
          itemStyle: {
            color: '#FD82E2'
          }
        },
        {
          code: 106,
          name: '氨气',
          unit: '',
          data: [

          ],
          itemStyle: {
            color: '#D955FF'
          }
        },
      ]
      axios.post( `/api/rabbit/data`, {
        farmId: this.farmId,
        roomId: this.roomId,
        startTime,
        endTime,
        code: codeList.map(item => item.code)
      }).then(res => {
        let dataList = codeList.map(item => {
          let findItem = res.data.data[item.code] || {}
          return {
            ...item,
            ...findItem,
            max: item.max ? item.max : findItem.max,
            min: item.min ? item.min : findItem.min,
          }
        }).filter(item => item.data.length)
        if (type === 'dialog') {
          this.dialogChartList = dataList
        } else {
          this.chartList = dataList
        }
      })
    },
    openDialog() {
      this.dialogShow = true
      this.changeDialogDate()
    },
    changeDialogDate() {
      this.getRoomOutData(this.datePicker[0], this.datePicker[1], 'dialog')
    },
    changeDialog1Date() {
      this.getTemp(this.datePicker[0], this.datePicker[1], 'dialog')
    },
    /**
     * 体温数据
     */
    getTemp(startTime, endTime,type = 'chart') {
      if (type === 'chart') {
        this.chartList1 = []
      } else {
        this.dialogChartList1 = []
      }
      // 区分体温、体重、采食量、料重比、非健康
      // 1.体温是近48小时的数据
      axios.post( `/api/rabbit/data`, {
        farmId: this.farmId,
        roomId: this.roomId,
        startTime,
        endTime,
        code: [301]
      }).then(res => {
        let item = {
          code:  301,
          name: '体温',
          unit: '',
          itemStyle: {
            color: '#00F0FF'
          },
          ...res.data.data[301],
          max: Number(res.data.data[301].max) + 0.2,
          min: Number(res.data.data[301].min) - 0.2,
          nameGap: 50
        }
        if (type === 'dialog') {
          this.dialogChartList1.push(item)
        } else {
          this.chartList1.push(item)
        }
      })
    },
    openDialog1() {
      this.dialogShow1 = true
      this.getTemp(this.datePicker1[0], this.datePicker1[1],'dialog')
    },
    /**
     * 生理数据
     */
    changeDialog2Date() {
      this.getGrowthData(this.datePicker2[0], this.datePicker2[1], 'dialog')
    },
    getGrowthData(startTime, endTime, type = 'chart') {
      if (type === 'chart') {
        this.chartList2 = []
        this.dataList = []
      } else {
        this.dialogChartList2 = []
        this.dialogDataList = []
      }
      // 2.体重、采食量，按只统计，两只为一笼，最终需要以笼为单位的平均值
      // 4. 料重比，是按笼统计取平均值
      axios.post(`/api/rabbit/bodyWeight`, {
        farmId: this.farmId,
        roomId: this.roomId,
        startTime,
        endTime
      }).then(res => {
        let chartList2 = [
          {
            code:  201,
            name: '日采食量(g/只)',
            unit: '',
            data: [

            ],
            itemStyle: {
              color: '#FE860E'
            },
            nameGap: 35,
          },
          {
            code:  202,
            name: '日体重(g/只)',
            unit: '',
            data: [

            ],
            nameGap: 40,
            itemStyle: {
              color: '#00F0FF'
            }
          },
          {
            code:  203,
            name: '日料重比(%/只)',
            unit: '%',
            data: [

            ],
            nameGap: 25,
            itemStyle: {
              color: '#8221dd'
            }
          },
        ]
        let chartList2Data = chartList2.map(item => {
          let findItem = res.data.data[item.code] || {}
          return {
            ...item,
            ...findItem,
            data: findItem.data.map(sub => {
              return {
                ...sub,
                // date 2023-08-01替换为 2023\n08-01
                name: sub.name.replace(/-/, '\n')
              }
            }),
            max: item.max ? item.max : findItem.max,
            min: item.min ? item.min : findItem.min,
          }
        })
        if (type === 'dialog') {
          this.dialogChartList2 = [
            ...this.dialogChartList2,
            ...chartList2Data
          ]
        } else {
          this.chartList2 = [
            ...this.chartList2,
            ...chartList2Data
          ]
        }
      })
      // 3. 非健康，是按笼统计取平均值
      axios.post(`/api/rabbit/unhealthy`, {
        farmId: this.farmId,
        roomId: this.roomId,
        startTime,
        endTime
      }).then(res => {
        let item =   {
          code: 204,
          name: '非健康(只/日)',
          unit: '',
          itemStyle: {
            color: '#3C7FF4'
          },
          nameGap: 20,
          ...res.data.data,
          data: res.data.data.data.map(item => {
            return {
              ...item,
              // date 2023-08-01替换为 2023\n08-01
              name: item.name.replace(/-/, '\n')
            }
          }),
          list: undefined
        }
        if (type === 'dialog') {
          this.dialogChartList2 = [
            ...this.dialogChartList2,
            item
          ]
          this.dialogDataList = res.data.data.list
        } else {
          this.chartList2 = [
            ...this.chartList2,
            item
          ]
          this.dataList = res.data.data.list
        }
      })
      /**
       * 那我就比如说计算第1周的第5003笼的料重比也就是8/1-8/8
       * 那就是：
       * 5003笼的周采食量就是：8/1-8/7 的5003笼的采食量在这7天的和
       * 5003笼周增重就是：8/8的5003笼体重-8/1的5003笼体重
       * 每笼的周料重比=每笼周采食量/每笼周增重就是
       */
    },
    openDialog2() {
      this.dialogShow2 = true
      this.getGrowthData(this.datePicker2[0], this.datePicker2[1],'dialog')
    },
    openDialog3() {
      this.dialogShow3 = true
      this.getTemEvaluate( this.datePicker3[0], this.datePicker3[1],'dialog')
    },
    openDialog4() {
      this.dialogShow4 = true
      this.changeDialog4Date()
    },
    setTemOption(list, up = 0, down = 0, type = 'chart') {
      console.log(up,down)
      const UP_LINE_COLOR = '#dc0830';
      const DOWN_LINE_COLOR = '#FE860E';
      const tempLimits = [
        {id: 1, ageMin: 35, ageMax: 43, up: 28, down: 26, upColor: UP_LINE_COLOR, downColor: DOWN_LINE_COLOR },
        {id: 2, ageMin: 43, ageMax: 53, up: 27, down: 24, upColor: UP_LINE_COLOR, downColor: DOWN_LINE_COLOR },
        {id: 3, ageMin: 53, ageMax: 67, up: 26, down: 24, upColor: UP_LINE_COLOR, downColor: DOWN_LINE_COLOR },
        {id: 4, ageMin: 67, ageMax: 70, up: 25, down: 24, upColor: UP_LINE_COLOR, downColor: DOWN_LINE_COLOR }
      ];

      const generateLimitSeries = () => {
        const series = [];

        const ageRanges = []
        list.forEach(point => {
          const age = point.age;
          const limit = tempLimits.find(l => age >= l.ageMin && age < l.ageMax);
          if (limit) {
            let findIndex = ageRanges.findIndex(item => item.id === limit.id);
            if (findIndex === -1) {
              ageRanges.push({
                ...limit,
                ageList: [age],
                xData: [point.name]
              });
            } else {
              ageRanges[findIndex].xData.push(point.name);
              if (!ageRanges[findIndex].ageList.includes(age)) {
                ageRanges[findIndex].ageList.push(age);
              }
            }
          }
        });
        ageRanges.forEach(range => {
          const lastValidIndex = range.xData[range.xData.length - 1];
          const lastValidPosition = list.findIndex(item => item.name === lastValidIndex);
          const isNearRightEdge = lastValidPosition > list.length * 0.8;

          series.push({
            name: '上限温度',
            type: 'line',
            connectNulls: true,
            data: list.map((item,) => {
              if (range.xData.includes(item.name)) {
                return range.up;
              }
              return '-';
            }),
            symbol: 'none',
            lineStyle: {
              color: UP_LINE_COLOR,
              type: 'dashed',
              width: 2
            },
            itemStyle: {
              color: UP_LINE_COLOR
            },
            label: {
              show: true,
              position: isNearRightEdge ? 'left' : 'top',
              distance: 10,
              formatter: `上限 ${range.up}℃`,
              color: UP_LINE_COLOR,
              fontSize: 12,
              backgroundColor: 'rgba(0,0,0,0.7)',
              padding: [2, 4],
              offset: isNearRightEdge ? [-10, 0] : [0, -10]
            }
          });

          series.push({
            name: '下限温度',
            type: 'line',
            connectNulls: true,
            data: list.map(item => {
              if (range.xData.includes(item.name)) {
                return range.down;
              }
              return '-';
            }),
            symbol: 'none',
            lineStyle: {
              color: DOWN_LINE_COLOR,
              type: 'dashed',
              width: 2
            },
            itemStyle: {
              color: DOWN_LINE_COLOR
            },
            label: {
              show: true,
              position: isNearRightEdge ? 'left' : 'bottom',
              distance: 10,
              formatter: `下限 ${range.down}℃`,
              color: DOWN_LINE_COLOR,
              fontSize: 12,
              backgroundColor: 'rgba(0,0,0,0.7)',
              padding: [2, 4],
              offset: isNearRightEdge ? [-10, 0] : [0, 10]
            }
          });
        });
        return series;
      };
      let option = {
        legend: {
          top: 10,
          data: [
            {
              name: '温度',
              itemStyle: {
                color: '#00F0FF'
              }
            },
            {
              name: '上限温度',
              itemStyle: {
                color: UP_LINE_COLOR
              }
            },
            {
              name: '下限温度',
              itemStyle: {
                color: DOWN_LINE_COLOR
              }
            }
          ],
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          icon: 'rect',
          itemWidth: 15,
          itemHeight: 2
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLabel: {
              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight,
              margin: 10,
              textAlign: 'center'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0093A7",
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#00FFFF",
              },
            },
            splitLine: {
              show: false,
            },
            data: list.map(item => {
              // 空格换行
              return item.name.split(" ").join("\n");
            }),
          },

        ],
        yAxis: [
          {
            name: '℃',
            nameTextStyle: {
              color: fontColor
            },
            min: 20,
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: fontColor,
                fontSize: fontSize
              },
              // 距离y轴偏移
              margin: 20
            },
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255, 255, 255, .1)'
              }
            },
            splitLine:{
              show:false,
              lineStyle:{
                color:'rgba(255, 255, 255, .1)'
              }
            },
          },
        ],
        grid: {
          left: 5,
          right: 20,
          top: 35,
          bottom: 5,
          containLabel: true
        },
        series: [
          {
            name: '温度',
            type: "line",
            itemStyle: {
              normal: {
                color: '#00F0FF',
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 255, 0.3)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(0, 255, 255, 0)",
                  },
                ]),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            label: {
              show: true,
              textStyle: {
                color: '#00eff2'
              },
              position: 'top',
              // 加摄氏度
              formatter: function (params) {
                return params.value + '℃'
              }
            },
            data: list.map(el => el.value),
          },
          ...generateLimitSeries()
        ]
      };
      if (type === 'chart') {
        this.temOption = JSON.parse(JSON.stringify(option))
      } else {
        this.dialogTemOption = JSON.parse(JSON.stringify(option))
      }
    },
    getLineOption(item, fontSize = 8, nameGap = 30, left = 20, top =  10) {
      return {
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        xAxis: {
          data: item.data.map(el => {
            return el.name.split(" ").join("\n")
          }),
          type: 'category',
          boundaryGap : true,
          axisLabel: {
            fontSize: fontSize,
            color: fontColor,
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'rgba(255, 255, 255, .1)'
            }
          },
          axisTick:{
            show:false,
          },
          splitLine:{
            show:false,
            lineStyle:{
              color:'rgba(255, 255, 255, 1)'
            }
          },
        },
        yAxis: [
          {
            name: item.name,
            nameTextStyle: {
              color: fontColor,
              fontSize
            },
            nameGap,
            min: Number(item.min),
            max: Number(item.max),
            nameLocation: 'middle',
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: fontColor,
                fontSize: fontSize,
              }
            },
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255, 255, 255, .1)'
              }
            },
            splitLine:{
              show:false,
              lineStyle:{
                color:'rgba(255, 255, 255, .1)'
              }
            },
          },
        ],
        grid: {
          left,
          right: 5,
          top,
          bottom: 10,
          containLabel: true
        },
        series: [
          {
            name: item.name,
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: item.data,
            label: {
              show: true,
              textStyle: {
                color: fontColor
              },
            },
            lineStyle: {
              width: 1
            },
            itemStyle: item.itemStyle
          },
        ]
      };
    },
    getLineOptionAndPoint(item, fontSize = 8, nameGap = 20, left = 10 ) {
      return {
        grid: {
          left,
          right: 25,
          top: 20,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        xAxis: {
          data: item.data.map(el => {
            return el.name
          }),
          type: 'category',
          boundaryGap : true,
          axisLabel: {
            fontSize: fontSize,
            color: fontColor,
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'rgba(255, 255, 255, .1)'
            }
          },
          axisTick:{
            show:false,
          },
          splitLine:{
            show:false,
            lineStyle:{
              color:'rgba(255, 255, 255, 1)'
            }
          },
        },
        yAxis: [
          {
            nameTextStyle: {
              color: fontColor,
              fontSize
            },
            nameLocation: 'middle',
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: fontColor,
                fontSize: fontSize,
              }
            },
            max: item.scatterMax.toFixed(1),
            min: item.scatterMin.toFixed(1),
            splitLine:{
              show:false,
              lineStyle:{
                color:'rgba(255, 255, 255, .1)'
              }
            },
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255, 255, 255, .1)'
              }
            },
          },
          {
            name: item.name,
            nameTextStyle: {
              color: fontColor,
              fontSize
            },
            nameGap,
            nameLocation: 'middle',
            interval: 5,
            min: item.min,
            max: item.max,
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: fontColor,
                fontSize: fontSize,
              }
            },
            splitLine:{
              show:false,
              lineStyle:{
                color:'rgba(255, 255, 255, .1)'
              }
            },
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255, 255, 255, .1)'
              }
            },
          },
        ],
        series: [
          {
            yAxisIndex: 0,
            symbol: 'line',
            symbolSize: 3,
            data: item.scatter,
            type: 'scatter',
          },
          {
            yAxisIndex: 1,
            name: item.name,
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: item.data,
            label: {
              show: true,
              textStyle: {
                color: fontColor
              },
            },
            lineStyle: {
              width: 1
            },
            itemStyle: item.itemStyle
          },
        ]
      };
    },
  }
}
</script>

<style lang="less">
.page2 {
  width: 1920px;
  height: 1080px;
  background-image: url("~@/assets/背景.png");
  position: relative;
  .logo {
    //background-image: url("../../assets/logo2.png");
    height: 47px;
    position: absolute;
    top: 54px;
    left: 50px;
    display: flex;
    align-items: center;
    .logo-name {
      padding-left: 15px;
      font-size: 30px;
      font-family: SourceHanSansCN;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 48px;

      background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

  }
  .head {
    background-image: url("~@/assets/头部.png");
    width: 100%;
    height: 133px;
    text-align: center;
    font-size: 36px;
    line-height: 83px;
    font-family: HuXiaoBo-NanShen-Regular, HuXiaoBo-NanShen;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    .text  {
      font-size: 42px;
      font-family: SourceHanSansCN;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 48px;
      background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 40px;
    }
  }
  .date {
    position: absolute;
    width: 400px;
    text-align: right;
    top: 67px;
    right: 37px;
    font-size: 30px;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 48px;

    background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.el-dialog {
  display: block;
  box-sizing: border-box;
  overflow: auto;
  background: rgba(6,90,143, 1);
  border: 2px solid rgba(42, 216, 253, .47);
  border-radius: 10px;
  .el-dialog__headerbtn {
    top: 10px;
  }
  .el-dialog__close {
    font-size: 28px;
  }
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__body {
    padding: 20px;
    color: #ffffff;

    .el-form-item__label {
      color: #ffffff;
      cursor: pointer;
      font-size: 22px;

      background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .el-range-input {
      font-size: 18px;
    }
  }

  .chart-list {
    display: flex;
    flex-wrap: wrap;
  }
  .thead {
    background-color: rgba(0, 147, 167, 0.4);
  }

  .tr {
    display: flex;
    align-items: center;
    .td {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      padding: 0 12px;
      width: 120px;
      color: #ffffff;
    }
    .td1 {
      text-align: left;
    }
    .td2 {
      width: 70%;
      text-align: center;
    }
    .td3 {
      text-align: left;
    }
  }
  .tr:nth-child(2n) {
    background-color: rgba(0, 147, 167, 0.2);
  }
}

.page2-6 {
  padding: 20px 38px;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  .el-input__inner {

    background: rgba(6, 90, 143, 0.85);
    border-color:  rgba(42, 216, 253, 0.47);
    color: #ffffff;
  }
  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background: rgba(6, 90, 143, 0.85);
    border-color:  rgba(42, 216, 253, 0.47);
    color: #ffffff;
    box-shadow:-1px 0 0 0 transparent;
  }
  .el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner  {
    border-color: rgba(42, 216, 253, 0.47);
  }
  .left2-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .right1,
  .left2 {
    position: relative;
    display: flex;
    flex-direction: column;
    .chart-list {
      flex-grow: 1;
      display: flex;
      flex-wrap: wrap;
    }
  }
  .more {
    color: #ffffff;
    cursor: pointer;
    background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 14px;
    font-weight: bold;
    margin-right: 12px;
  }
  .center {
    padding: 0 20px;
    .center-controll {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .video-wrapper {
      background-color: rgba(0, 147, 167, 0.2);
      padding: 16px;
      padding-bottom: 0;
      width: 100%;
    }
      video {
      width: 100%;
      height: 100%;
      object-fit: fill
    }
    .video-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-right: -10px;
    }
    .video-item {
      width: calc(50% - 10px);
      margin-right: 10px;
      margin-bottom: 20px;
      height: 280px;
      background-color: rgba(6, 90, 143, 0.15);
    }
    .video-item2 {
      height: 280px;
    }
  }
  .chart-list {
    display: flex;
    flex-wrap: wrap;
    .chart-item {
      width: 33%;
      height: 100px;
    }
  }
  .title-bg {
    font-size: 18px;
    height: 35px;
    color: #ADE3FF;
    padding-left: 21px;
    line-height: 35px;
    background-image: url("~@/assets/iocn/5.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .bg2 {
    background-image: url("~@/assets/iocn/4.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .bg3 {
    background: rgba(6,90,143,0.15);
    border: 2px solid rgba(42, 216, 253, .47);
    border-radius: 10px;
  }
  .left {
    flex-shrink: 0;
    .left1 {
      width: 492px;
      height: 110px;
      .left1-item {
        background-image: url("~@/assets/icon2/1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-left: 16px;
        color: #ffffff;
        width: 220px;
        height: 66px;
        .left1-item-left {
          height: 50px;
          .left1-item-value {
            vertical-align: sub;
            .left1-item-count {
              font-size: 24px;
              line-height: 20px;
              color: #FED855;
            }
            .left1-item-unit {
              font-size: 12px;
              line-height: 24px;
              color: #fff;
              margin-left: 10px;
            }
          }
        }
        img {
          width: 50px;
          height: 50px;
        }
      }
    }
    .left2 {
      width: 492px;
      padding: 20px 20px 0 20px;
      .left2-item-list {
        padding-right: 10px;
      }
      .left2-item {
        width: 215px;
        height: 100px;
        padding-left: 115px;
        margin-left: -20px;
        color: #fff;
        .left2-item-label {
          position: relative;
        }
        img {
          width: 82px;
          height: 55px;
          margin-right: 12px;
        }
        .left2-item-name {
          margin-bottom: 2px;
          font-size: 18px;
          line-height: 15px;
          font-weight: bold;
          color: #FFFFFF;
        }
        .left2-item-value {
          position: absolute;
          vertical-align: super;
          width: 150px;
          .left2-item-count {
            font-size: 16px;
            font-weight: 400;
            color: #FFFFFF;
            background: linear-gradient(0deg, #73DAFC 0%, #2DCBFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .left2-item-unit {
            font-size: 14px;
            color: #46D0FE;
            margin-left: 5px;
          }
        }
      }
    }
  }
  .center {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    .center1 {
      width: 847px;
      height: 379px;
      margin-bottom: 24px;
      padding: 30px;
      padding-bottom: 0;
      .center1-1,
      .center1-2{
        flex: 1;
        height: 100%;
      }
    }
    .center2 {
      margin-top: 12px;
      height: 240px;
      display: flex;
      flex-direction: column;
    }
  }
  .right {
    flex-shrink: 0;
    .right1 {
      width: 471px;
      height: 412px;
      margin-bottom: 14px;
      padding: 20px 10px;
    }
    .right2 {
      width: 471px;
      height: 220px;
      margin-bottom: 12px;
      padding: 20px 10px;
    }
    .right4 {
      position: relative;
      width: 471px;
      height: 500px;
      padding: 20px 10px;
      margin-top: 15px;
      padding-bottom: 0;
    }

  }

}
.color-legend {
  flex-shrink: 0;
  margin-top: 10px;
  .legend-item {
    display: flex;
    align-items: center;
    .legend-color {
      width: 5px;
      height: 80px;
      margin-right: 5px;
      border-radius: 2px;
    }
    .legend-labels {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 80px;
      font-size: 10px;
      color: #abd0e4;
      span {
        line-height: 1;
      }
    }
  }
}
</style>
